<template>
	<view>
		<view class="box">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="100">
				<u-form-item :required='true' label="收货人" prop="name" borderBottom ref="item1">
					<u--input v-model="model1.name" border="none"></u--input>
				</u-form-item>
				<u-form-item :required='true' label="手机号" prop="mobile" borderBottom ref="item1">
					<u--input v-model="model1.mobile" border="none"></u--input>
				</u-form-item>
				<u-form-item :required='true' label="所在地区" prop="areaId" borderBottom ref="item1" @click="pupShow">
					<view class="countBox1" v-if="!model1.areaId">
						请选择
					</view>
					<view class="countBox2" v-else>
						{{model1.areaName}}
					</view>
				</u-form-item>
				<u-form-item :required='true' :borderBottom='false' label="详细地址" prop="detailAddress" ref="item1">
				</u-form-item>
				<u--textarea v-model="model1.detailAddress" placeholder="请输入内容" />
				<u-form-item :required='true' :borderBottom='false' label="是否默认" prop="defaultStatus" ref="item1">
					<u-switch v-model="model1.defaultStatus" />
				</u-form-item>
				<view class="held">

				</view>
			</u--form>
			<view class="subit" @click="submit">
				保存
			</view>
		</view>
		<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="show=false"
			@change="changeHandler" :defaultIndex="defaultIndex"></u-picker>
	</view>
</template>

<script>
	import {
		areaTree
	} from "@/api/wine/wine.js"
	import {
		createAddaress,
		updateAddaress,
		getaddress
	} from '@/api/address'
	export default {
		data() {
			return {
				show: false,
				columns: [],
				origiData: [], //获取到的原始数据
				value: "", //
				defaultIndex: [],
				model1: {
					id: undefined,
					name: '',
					detailAddress: '',
					mobile: '',
					areaName: '',
					areaId: '',
					defaultStatus: false
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请输入收货人',
						trigger: ['blur', 'change']
					},
					'areaId': {
						type: 'number',
						required: true,
						message: '请选择所在地区',
						trigger: ['blur', 'change']
					},
					'detailAddress': {
						type: 'string',
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					},
					'mobile': {
						required: true,
						type: 'number',
						message: '请填写电话',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		async onLoad(e) {
			if (e.id) {
				this.model1.id = e.id
				const {
					data
				} = await getaddress(e.id)
				this.model1 = data;
				console.log(this.model1)
			}
			this.getArea()
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			//打开弹窗，删除默认数据
			pupShow(){
				this.model1.areaName=''
				this.model1.areaId=''
				this.show=true
			},
			//初始化开始数据
			handelData() {
				//默认贵州省、贵阳市、南明区
				let shi_s = '520100';
				let qu_s = '520102';

				let shi = [];
				let qu = [];
				this.origiData.forEach((shi_item, shi_index) => {
					if (shi_item.id == shi_s) {
						this.defaultIndex[0] = shi_index
						shi_item.children.forEach((qu_item, qu_index) => {
							if (qu_item.id == qu_s) {
								this.defaultIndex[1] = qu_index
							}
							qu.push(qu_item.name);
						})
					}
					shi.push(shi_item.name);
				});
				this.columns.push(
					JSON.parse(JSON.stringify(shi)),
					JSON.parse(JSON.stringify(qu))
				);
				console.log('初始', this.columns)
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					this.origiData.forEach(item => {
						if (value[0] == item.name) {
							let qu = [];
							let flag = item.children[0].name;
							item.children.forEach((val, ol) => {
								qu.push(val.name);
							});
							picker.setColumnValues(1, qu);
						}
					});
				}
			},
			// 确认选中的数据
			confirm(e) {
				let shi = this.origiData[e.indexs[0]]
				let qu = shi.children[e.indexs[1]]
				this.model1.areaId = qu.id
				this.model1.areaName = "贵州省" + " " + e.value[0] + " " + e.value[1]
				this.show = false;
			},
			submit() {
				let that = this
				that.$refs.uForm.validate().then(res => {
					if (that.model1.id) {
						updateAddaress(that.model1).then(res => {
							uni.$u.toast('修改成功')
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						})
					} else {
						createAddaress(that.model1).then(res => {
							uni.$u.toast('添加成功')
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						})
					}
					// console.log('参数', that.model1)
				}).catch(errors => {
					uni.$u.toast('校验失败')
					console.log(errors, that.model1)
				})
			},
			//获得区县数据
			getArea() {
				let that = this
				uni.showLoading({
					title: '加载中',
				})
				areaTree().then(response => {
					uni.hideLoading()
					that.origiData = response.data
					that.handelData();
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	.box {
		width: 690rpx;
		height: fit-content;
		margin: 20rpx auto;
		padding-bottom: 100rpx;
	}

	.boxTitle {
		width: 690rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 32rpx;
		color: #999999;
	}

	.imgBox {
		width: 690rpx;
		padding-bottom: 20rpx;
		height: fit-content;
		display: flex;
		flex-wrap: wrap;
	}

	.busImg {
		width: 300rpx;
		height: 200rpx;
	}

	.busImg1 {
		width: 400rpx;
		height: 300rpx;
	}

	.held {
		width: 100%;
		height: 2rpx;
		background-color: #F1F1F1;
		margin-top: 30rpx;
	}

	.subit {
		width: 690rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		border-radius: 50rpx;
		background-color: #E84E22;
		position: fixed;
		bottom: 80rpx;
		left: 30rpx;
	}

	.radioBox {
		width: 200rpx;
		height: 100%;
		margin-left: 250rpx;
	}

	.countBox1 {
		width: 100%;
		height: 100%;
		color: #999999;
	}

	.countBox2 {
		width: 100%;
		height: 100%;
	}
</style>